<template>
  <!-- 调整 -->
  <w-container ref="container" class="content">
    <w-query-search
      ref="search"
      authority-key="product"
      page-name="调整"
      :query-items="queryItems"
      :label-width="'60'"
      @query="handleQuery"
    />
    <w-table
      v-if="$store.getters.token === 'admin'"
      ref="table"
      :page-size="pageSize"
      :current-page="currentPage"
      :total-recored="totalRecored"
      :table-items="tableItemList"
      :tab-data="list"
      :is-heigth="true"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <template v-slot:price="scope">
        <span v-if="!scope.scope.row.isEdit">{{ scope.scope.row.originUnitPrice }}</span>
        <el-input v-if="scope.scope.row.isEdit" v-model="scope.scope.row.originUnitPrice" />
      </template>
      <template v-slot:unitPrice="scope">
        <span v-if="!scope.scope.row.isEdit">{{ scope.scope.row.unitPrice }}</span>
        <el-input v-if="scope.scope.row.isEdit" v-model="scope.scope.row.unitPrice" />
      </template>
      <template v-slot:status="scope">
        <span v-if="scope.scope.row.status >>> 0 === 1">已上架</span>
        <span v-if="scope.scope.row.status >>> 0 === 2">已下架</span>
      </template>
      <template v-slot:options="scope">
        <el-button v-if="scope.scope.row.status === 1" type="text" @click="upOrDown(scope.scope.row, 2)">下架</el-button>
        <el-button v-if="scope.scope.row.status === 2" type="text" @click="upOrDown(scope.scope.row, 1)">上架</el-button>
        <el-button v-if="!scope.scope.row.isEdit" type="text" @click="edit(scope.scope.row, scope.$index)">编辑</el-button>
        <el-button v-if="scope.scope.row.isEdit" type="text" @click="save(scope.scope.row)">保存</el-button>
        <el-button v-if="scope.scope.row.isEdit" type="text" @click="calc(scope.scope.row, scope.$index)">取消</el-button>
      </template>
    </w-table>
    <w-table
      v-else
      ref="table"
      :page-size="pageSize"
      :current-page="currentPage"
      :total-recored="totalRecored"
      :table-items="tableItemList1"
      :tab-data="list"
      :is-heigth="true"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <template v-slot:price="scope">
        <span v-if="!scope.scope.row.isEdit">{{ scope.scope.row.unitPrice }}</span>
        <el-input v-if="scope.scope.row.isEdit" v-model="scope.scope.row.unitPrice" />
      </template>
      <template v-slot:status="scope">
        <span v-if="scope.scope.row.status >>> 0 === 1">已上架</span>
        <span v-if="scope.scope.row.status >>> 0 === 2">已下架</span>
      </template>
      <template v-slot:options="scope">
        <el-button v-if="scope.scope.row.status === 1" type="text" @click="upOrDown(scope.scope.row, 2)">下架</el-button>
        <el-button v-if="scope.scope.row.status === 2" type="text" @click="upOrDown(scope.scope.row, 1)">上架</el-button>
        <el-button v-if="!scope.scope.row.isEdit" type="text" @click="edit(scope.scope.row, scope.$index)">编辑</el-button>
        <el-button v-if="scope.scope.row.isEdit" type="text" @click="save(scope.scope.row)">保存</el-button>
        <el-button v-if="scope.scope.row.isEdit" type="text" @click="calc(scope.scope.row, scope.$index)">取消</el-button>
      </template>
    </w-table>
  </w-container>
</template>
<script>
import mixin from '../mixin/common'
import { keyMap } from '@/api/user'
import { getProductList, updateStatus, updateUnitPrice } from '@/api/product'
export default {
  mixins: [mixin],
  data() {
    return {
      list: [],
      price: '',
      queryItems: [
        // { label: '创建时间', type: 'datetimerange', value: [], key: 'createTime', noTime: true },
        { label: '商品名称', placeholder: '请输入', value: '', key: 'goodsName' }
        // { label: '状态', type: 'select', value: '', key: 'status', options: { label: 'name', value: 'code', list: [{ name: '已上架', code: 1 }, { name: '已下架', code: 2 }] }}
      ],
      tableItemList: [
        { label: '商品名称', prop: 'goodsName', width: 200, align: 'left' },
        { label: '平台商品价格/元', prop: 'originUnitPrice', width: 140, align: 'left', type: 'slot', slotType: 'price' },
        { label: '自媒体商品价格/元', prop: 'unitPrice', width: 140, align: 'left', type: 'slot', slotType: 'unitPrice' },
        { label: '商品状态', prop: 'status', width: 100, align: 'left', type: 'slot', slotType: 'status' },
        { label: '创建时间', prop: 'createTime', width: 180, align: 'left' },
        { label: '操作', type: 'slot', slotType: 'options', width: 100 }
      ],
      tableItemList1: [
        { label: '商品名称', prop: 'goodsName', width: 200, align: 'left' },
        { label: '商品价格/元', prop: 'unitPrice', width: 140, align: 'left', type: 'slot', slotType: 'price' },
        { label: '商品状态', prop: 'status', width: 100, align: 'left', type: 'slot', slotType: 'status' },
        { label: '创建时间', prop: 'createTime', width: 180, align: 'left' },
        { label: '操作', type: 'slot', slotType: 'options', width: 100 }
      ]
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    async upOrDown(row, status) {
      const res = await updateStatus({ id: row.id, status: status, channle: keyMap[this.$store.getters.token] })
      if (res.code === '0') {
        this.$message.success('成功！')
        this.handleQuery(this.filterForm)
      }
    },
    edit(row, index) {
      this.price = row.price
      let pass = true
      this.list.forEach(item => {
        if (item.isEdit) {
          pass = false
        }
      })
      if (!pass) {
        this.$message.error('请编辑完当前在编辑的数据')
        return
      }
      row.isEdit = true
      this.$set(this.list, index, ...row)
    },
    calc(row, index) {
      row.price = this.price
      row.isEdit = false
      this.$set(this.list, index, ...row)
    },
    // 初始化
    async loadData(val) {
      val.channel = keyMap[this.$store.getters.token]
      const result = await getProductList(val)
      if (result.code === '0') {
        this.list = result.data.records
        this.totalRecored = result.data.total
        return
      }
    },
    // 保存
    async save(val) {
      val.channel = keyMap[this.$store.getters.token]
      const result = await updateUnitPrice(val)
      if (result.code === '0') {
        this.$message.success('成功!')
        this.handleQuery(this.filterForm)
        return
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.btn {
  text-align: center;
}
</style>
